<template>
  <h1>Icon组件</h1>
  <!-- 原始图标 -->
   <div>
    <rl-icon icon="image"></rl-icon>
    <rl-icon icon="file"></rl-icon>
    <rl-icon icon="check"></rl-icon>
    <rl-icon icon="magnifying-glass"></rl-icon>
    <rl-icon icon="star"></rl-icon>
    <rl-icon icon="phone"></rl-icon>
    <rl-icon icon="arrow-right"></rl-icon>
    <rl-icon icon="xmark"></rl-icon>
    <rl-icon icon="list"></rl-icon>
    <rl-icon icon="plus"></rl-icon>
   </div>
  <!-- 加入其他属性 -->
   <div>
    <rl-icon icon="image" color="pink"></rl-icon>
    <rl-icon icon="file" size="2x"></rl-icon>
    <rl-icon icon="check" border></rl-icon>
    <rl-icon icon="magnifying-glass" flip="horizontal"></rl-icon>
    <rl-icon icon="star" pulse></rl-icon>
    <rl-icon icon="phone" rotation="270"></rl-icon>
    <rl-icon icon="arrow-right" bounce></rl-icon>
    <rl-icon icon="xmark" shake></rl-icon>
    <rl-icon icon="list" fade></rl-icon>
    <rl-icon icon="plus" spin-pulse></rl-icon>
   </div>
</template>

<script setup lang="ts">
  import RlIcon from '@/components/Icon/Icon.vue'
  defineOptions({
    name:'IconView'
  })
</script>

<style scoped>
div{
  margin-bottom: 20px;
}
</style>